<template>
	<view class="content">
		<image class="logo" src="@/static/logos.jpg" mode="scaleToFill"></image>
		<text class="title">金金橙</text>
		
		<view class="text-area">
			<!-- #ifdef H5 -->
		<u-button shape="circle" @click="gophoneLogin()"  color="#ff6600" :hairline="false"
			:throttleTime="2000">手机号码登录</u-button>	
			<!-- #endif -->
			<!-- #ifdef  MP-WEIXIN -->
			<button class="wx-but" @click="gowxLogin()" style="border-color: #ff6600; color: #ff6600;"
				plain="true">微信一键登录</button>
			<!-- #endif -->
		</view>
		<!-- <view class="bottomto" style="width: 100%; text-align: center;">
			<checkbox-group shape="circle" @change="checkboxChange" >
				<label style="color: #000;" >
					<p class="last">
						<checkbox :checked="checked" activeBorderColor="#ff6600" iconColor='#f0ad4e' color="#000"
							borderColor="#ff6600" class="round-checkbox"  />
						我已阅读并同意<text @click="agreement()">用户协议</text> 与 <text @click="service()">隐私政策</text>
					</p>
				</label>
			</checkbox-group>
		</view> -->
		<view style="display: flex;flex-wrap: wrap; align-items: center; margin-top: 30rpx;font-size: 26rpx;color: #9a9a9a;">
			<u-checkbox-group v-model="checkboxValue" placement="column">
				<u-checkbox :name="1" activeColor="#fe881e" size="26rpx" label="我已阅读并同意">
				</u-checkbox>
			</u-checkbox-group>
			<text style="color: #fe881e;" @click="NAVPAGE('/pages/home/essay/essay?key=YHXY')">《用户协议》</text>和<text
				style="color: #fe881e;" @click="NAVPAGE('/pages/home/essay/essay?key=YSZC')">《隐私政策》</text>
		</view>
		<u-notify ref="uNotify"></u-notify>
		
		
		<u-modal :show="modalShow" title="绑定手机号" showCancelButton @cancel="modalShow = false" @confirm="confirm">
			 <view class="electricity">
			 	<view class="formItem">
			 		<view class="area">+86</view>
			 		<input maxlength="11" type="number" class="input phone" name="phone" :placeholder="'请输入手机号'"
			 			v-model="phone">
			 	</view>
			 	<view class="formItem">
			 		<input type="text" class="input" name="code" :placeholder="'请输入验证码'" v-model="code">
			 		<view class="sendCode btn-color" style="color: #fd8a1c;" v-if="showTime">{{time}}s{{'后重新获取'}}</view>
			 		<view class="sendCode btn-color" style="color: #fd8a1c;" @click="getCode()" hover-class="text-hover"
			 			v-else>{{'获取验证码'}}
			 		</view>
			 	</view>
			 </view>
		</u-modal>
		
		
		
	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations,
		mapState
	} from 'vuex'
	import Ws from '@/utils/socket.js'
	export default {
		data() {
			return {
				checked: false,
				checkboxValue: [],
				yqcdoe:'',
				modalShow:false,
				phone:'',
				code:'',
				isClick: true, //避免用户重复点击
				timer: null, //定时器
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				 
			}
		},
		computed:{
			...mapState('user',['webSocket'])
			
		},
		onLoad(o) {
             this.yqcdoe = o.code 
		},
		methods: {
			...mapActions(['getUserInfos']),
			...mapActions('user',['getUserInfo']),
			...mapMutations('user', ['setUserId','setWebSocket']),
			// async checkboxChange(e) {
			// 	this.checked = e.detail.value.length > 0;
			// },
			// 获取验证码
			getCode() {
				if (this.isClick) {
					if (this.phone.length != 11) {
						return this.$msg('手机格式不正确')
					}
					uni.showLoading()
					this.$api.sendApi({
						phone: this.phone
					}).then((res) => {
						uni.showLoading()
						if (res.code == 1) {
							this.showTime = true;
							this.$msg(res.info)
							this.timer = setInterval(() => {
								this.isClick = false;
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.isClick = true;
									this.time = 60;
									this.showTime = false;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					})
				}
			},
			confirm(){
				 if (uni.$u.test.isEmpty(this.phone)) return this.$msg('请输入手机号')
				 if (!uni.$u.test.mobile(this.phone)) {
				 	uni.showToast({
				 		title: '手机号格式有误',
				 		icon: "none"
				 	})
				 	return;
				 }
				 if (uni.$u.test.isEmpty(this.code)) return this.$msg('请输入验证码')
				 this.$api.MobilePhone({
					 phone:this.phone,
					 code:this.code
				 }).then(res=>{
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/tabBarHome/home'
						})
					}, 500)
				 })
				 
			},
			gophoneLogin() {
				// if (this.checked) {
				// 	uni.navigateTo({
				// 		url: "/pages/login/login"
				// 	})
				// } else {
				// 	this.$refs.uNotify.show({
				// 		color: '#ff6600',
				// 		bgColor: '#ffffff',
				// 		message: '请先勾选同意后再进行登录',
				// 		duration: 1500,
				// 		fontSize: 13,
				// 		safeAreaInsetTop: true
				// 	})
				// }
				if (!this.checkboxValue.length) {
					uni.$u.toast('请勾选用户协议');
					return false;
				}else{
					uni.navigateTo({
					 		url: "/pages/login/login"
				  	})
				}
			},
			// 微信登录
			// #ifdef MP-WEIXIN
			gowxLogin() {
			  console.log(this.checkboxValue.length,'this.checked')
			 if(this.checkboxValue.length == 0){
				  uni.$u.toast('请勾选用户协议')
				  return
			 }
					// uni.login({
					// 	provider: 'weixin',
					// 	success: (loginRes) => {
					// 		console.log('登录成功', loginRes);
					// 		// uni.navigateTo({
					// 		// 	url: "/pages/login/login",
					// 		// })
					// 	},
					// 	fail: (err) => {
					// 		console.error('登录失败', err);
					// 	}
					// });
					
					 
						uni.login({
							success: (res) => {
								console.log(res,'res')
								this.$api.wxLogin({
									code: res.code,
								    qrcode:this.yqcdoe || '',       
								}).then(res => {
									this.getUserInfos(res.data.token)
									this.getUserInfo(res.data.token)
									// this.webSocket.socketTask.close()
									this.getUserInfo(res.data.token).then(res => { 
										if(res.phone == ''){
											this.modalShow = true
										    return
										}
										this.setUserId(res.id)
										uni.$u.toast('登录成功');
										uni.hideLoading()
										this.setWebSocket(new Ws('wss://jinchengzi.cn/wss', 3000,res.id))
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/tabBarHome/home'
											})
										}, 500)
									})
									// this.setUserId(res.data.id)
									// this.getUserInfo().then(res => {
									// 	uni.$u.toast('登录成功');
									// 	uni.hideLoading()
									// 	setTimeout(() => {
									// 		uni.reLaunch({
									// 			url: '/pages/home/index'
									// 		})
									// 	}, 500)
									// })
								})
							},
						})
			 
					
			},
			// #endif
			agreement() {},
			service() {},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	 }
	.logo {
	width: 264rpx;
	height: 264rpx;
	margin-top: 200rpx;
	}

	.text-area {
			// display: flex;
			justify-content: center; /* 确保按钮在其容器内水平居中 */
			margin: 200rpx 0; /* 调整间距 */
			width: 80%; /* 确保text-area占满宽度 */
   }
	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF6600;
		text-align: center; /* 标题居中 */
	}

	.bottomto {
		margin-top: 20rpx;
		position: relative;
		text-align: center; /* 底部内容居中 */
	}

	.last {
		font-size: 23rpx;
		display: inline-block;
	}

	.last text {
		color: #ff6600;
		font-size: 23rpx;
		margin: 0 10rpx;
		display: inline-block;
	}
	.wx-but {
		margin: 20rpx 0;
		 height:80.8rpx;
		 line-height:80.8rpx;
		font-size: 36rpx;
		border-radius: 50rpx;
	}

	.round-checkbox {
		transform: scale(0.7);
		box-sizing: border-box;
		font-weight: 400;
		font-size: 25rpx;
		color: #8D8D8D;
		line-height: 30rpx;
		text-align: left;	 
	}
	.electricity{
		.formItem {
			height: 104rpx;
			border-bottom: 1px solid rgba(238, 238, 238, 1);
			display: flex;
			align-items: center;
		
			.area {
				font-size: 30rpx;
				color: #333;
				padding-right: 34rpx;
				line-height: 1;
				border-right: 1rpx solid #9B9B9B;
			}
		
			.sendCode {
				background-color: transparent;
				color: #EC4849;
			}
		
			input {
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
		
				&.phone {
					padding-left: 33rpx;
				}
		
				&::-webkit-input-placeholder {
					color: rgba(204, 204, 204, 1);
				}
			}
		}
	}
</style>